<template>
    <div class="game2B">
      <audio id="errorSound"
        src="http://47.113.227.126:3001/sounds/lakk/%E5%BE%88%E6%8A%B1%E6%AD%89%EF%BC%8C%E6%B6%82%E8%89%B2%E9%94%99%E8%AF%AF%EF%BC%8C%E8%AF%B7%E6%B6%82%E4%B8%8A%E6%AD%A3%E7%A1%AE%E7%9A%84%E9%A2%9C%E8%89%B2%E3%80%82.mp3"></audio>
      <!-- <input type="text" v-model="imgurl" @change="loadImage" placeholder="放url"/>
        <input type="color" v-model="replacementColor" />
        <button @click="downloadImage">下载</button> -->
      <canvas ref="canvas" width="600" height="500" @click="pickColor"></canvas>
      <input type="text" v-model="imgurl" @change="loadImage">
      <div class="desc">   {{change1}}</div>
      <input type="color" v-model="replacementColor">
  
    </div>
  </template>
  
  <script setup>
  import api from '@/api/user.js'
  import config from '@/config/config.js'
  import { ref, onMounted, defineProps,defineEmits } from 'vue';
  const emits = defineEmits(['next']);
  import { useAuthStore } from '@/store/index.ts'
  import { message } from 'ant-design-vue';
  const store = useAuthStore();
  // 定义颜色选项
  const chooseitems = ref(["#f1a2b9", "#78b566", "#fbe8d3"]);
  const colornum = ref(0);
  const colormap = new Map();
  // 图像 URL
  const imgurl = ref('');
  const change1=ref('');
  // 引用 canvas 和上下文
  const canvas = ref(null);
  const ctx = ref(null);
  
  // 图像和图像数据的引用
  const image = ref(null);
  const originalImageData = ref(null);
  
  // 替换颜色的默认值
  const replacementColor = ref('#000000');
  const num = ref(0);
  // 挂载后加载图像并获取上下文
  onMounted(() => {
    ctx.value = canvas.value.getContext('2d');
  
    imgurl.value = config.Target + props.imgSrc;
    getoptions();
    loadImage();
    console.log(colormap);
  });
 
  //处理选项数据
  const getoptions = () => {
    let correctanswer = [];
    let answer = [];
    for (let item of props.correctanswer.split(',')) {
      correctanswer.push(item.split('->')[1])
      answer.push(item.split('->')[0])
      colormap.set(item.split('->')[0], item.split('->')[1])
    }
    chooseitems.value = correctanswer;
  }
  // Define props
  const props = defineProps({
    imgSrc: {
      type: String,
      required: true
    },
    correctanswer: {
      type: String,
      required: true
    }
  });
  
  
  
  // 选择颜色的方法
  const choosecolor = (item) => {
    replacementColor.value = chooseitems.value[item];
  };
  
  // 加载图像到 canvas 上
  const loadImage = () => {
    let url = imgurl.value;
    url = url.replace('http://47.113.227.126:3001/lakk', '/img'); // 处理 URL
    image.value = new Image();
    image.value.crossOrigin = 'Anonymous'; // 处理跨域问题
    image.value.src = url;
    image.value.onload = () => {
      ctx.value.drawImage(image.value, 0, 0, canvas.value.width, canvas.value.height);
      originalImageData.value = ctx.value.getImageData(0, 0, canvas.value.width, canvas.value.height);
    };
  };
  
  // 获取用户点击的颜色
  const pickColor = (event) => {
    const rect = canvas.value.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const pixel = ctx.value.getImageData(x, y, 1, 1).data;
    const pickedColor = { r: pixel[0], g: pixel[1], b: pixel[2] };
    console.log(rgbToHex(pixel[0], pixel[1], pixel[2]));
  change1.value=change1.value+','+rgbToHex(pixel[0], pixel[1], pixel[2])+"->"+replacementColor.value;
  console.log(change1.value);
    num.value++;
    let xx= 0;

      replaceColor(pickedColor);

  
  
  };
  
  // 替换选定颜色的方法
  const replaceColor = (pickedColor) => {

    const imageData = ctx.value.getImageData(0, 0, canvas.value.width, canvas.value.height);
    const data = imageData.data;
    const targetColor = hexToRgb(replacementColor.value);
  
    for (let i = 0; i < data.length; i += 4) {
      if (data[i] === pickedColor.r && data[i + 1] === pickedColor.g && data[i + 2] === pickedColor.b) {
        data[i] = targetColor.r;
        data[i + 1] = targetColor.g;
        data[i + 2] = targetColor.b;
      }
    }
  
    ctx.value.putImageData(imageData, 0, 0);
  
  
  };
  
  // 将十六进制颜色转换为 RGB 格式
  const hexToRgb = (hex) => {
    const bigint = parseInt(hex.slice(1), 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = (bigint & 255);
    return { r, g, b };
  };
  // 将rgb颜色转换为 十六进制 格式
  function rgbToHex(r, g, b) {
    // 将每个颜色值转换为16进制字符串，并确保其长度为2
    const toHex = (color) => {
      const hex = color.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    };
  
    // 拼接结果
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
  }
  
  // 下载处理后的图像
  const downloadImage = () => {
    const link = document.createElement('a');
    link.href = canvas.value.toDataURL('image/png');
    link.download = 'canvas-image.png';
    link.click();
  };
  
  
  </script>
  
  <style scoped>
  .game2B {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  
    .desc {
      font-size: 2rem;
    }
  
    .btns {
      display: flex;
      gap: 2rem;
  
      .item {
        height: 5rem;
        width: 5rem;
      }
    }
  }
  
  canvas {
    border: 1px solid black;
    width: 600px;
    height: 500px;
  }
  </style>